<template>
  <div>
    <teleport to="body">
      <!-- 朦版 -->
      <transition name="fade">
        <div
          v-if="modelValue"
          class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
          @click="emits('update:modelValue', false)"
        ></div>
      </transition>

      <!-- 内容 -->
      <transition name="popup-down-up">
        <div
          v-if="modelValue"
          v-bind="$attrs"
          class="w-screen bg-white dark:bg-zinc-800 z-50 fixed bottom-0"
        >
          <!-- 留插槽给用户渲染-->
          <slot></slot>
        </div>
      </transition>
    </teleport>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    require: true,
    type: Boolean
  }
})

const emits = defineEmits(['update:modelValue'])
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.popup-down-up-enter-active,
.popup-down-up-leave-active {
  transition: all 0.3s;
}

.popup-down-up-enter-from,
.popup-down-up-leave-to {
  transition: translateY(100%);
}
</style>
